<template>
<view class="page">
	<view v-if="token&&isLogin" class="body">
		<!-- 余额 -->
		<template v-if="type=='balance'">
			<view class="m-header">
				<navigator url="/package_member/property/list/list?type=balance" hover-class="none" class="mx-btn">
					<view class="icon iconfont f-s26">&#xe687;</view>
					<text>明细</text>
				</navigator>
				<view class="type-name">余额（元）</view>
				<view class="val-area">
					<view class="val">0</view>
					<navigator url="/package_member/property/caseout/caseout" hover-class="none" class="tx-btn" >
						<view class="icon iconfont f-s26">&#xe644;</view>
						<text>提现</text>
					</navigator>
					<navigator url="/package_member/property/caseout/caseout" hover-class="none" class="cz-btn" >
						<view class="icon"><image :src="static_img+'images/tx_icon.png'" mode="widthFix"></image></view>
						<text>充值</text>
					</navigator>
				</view>
			</view>
			<view class="info-list-wrap">
				<view class="item">
					<view class="label">可用</view>
					<view class="con">0</view>
				</view>
				<view class="item">
					<view class="label">预计结算</view>
					<view class="con">0</view>
				</view>
				<view class="item">
					<view class="label">提现中</view>
					<view class="con">0</view>
				</view>
			</view>  
		</template>
		
		<!-- 健康币 -->
		<template v-if="type=='gold'">
			<navigator url="/package_member/share/share?type=share" hover-class="none" class="invite-btn m-b2">
				<view class="left"><image :src="static_img+'images/invite_icon.png?has=1234567'" mode="widthFix"></image></view>
				<view class="right">
					<view class="text">每成功邀请1位新用户注册即可获得<text class="f-red f-wb">100</text>健康币</view>
					<view class="btn">立即邀请</view>
				</view>
			</navigator>
			<view class="m-header">
				<navigator url="/package_member/property/list/list?type=gold" hover-class="none" class="mx-btn">
					<view class="icon iconfont f-s26">&#xe687;</view>
					<text>明细</text>
				</navigator>
				<view class="type-name">
					<view class="name">健康币</view> 
				</view>
				<view class="val-area">
					<view class="val">{{gold||0}}</view>
				</view>
			</view> 
			<view class="tips m-b2">*健康币为用户推广赚取或消费所得，支付时可直接抵扣现金，或兑换礼品使用</view>
			
			<view class="hd-title">
				<image src="@/static/images/title_icon.png" mode="widthFix"></image>
				<view class="title">健康币兑换礼品</view>
				<image src="@/static/images/title_icon.png" mode="widthFix"></image>
			</view>
			<template v-if="!loadingState.default">
				<template v-if="false">	
					<view class="gift-list-wrap">		
						<view class="item" v-for="(item,index) in 3" :key="index">
							<view class="pic"><image :src="static_img+'upload/gift_goods.jpg'" mode="widthFix"></image></view>
							<view class="title split-line">金龙鱼花生油一瓶</view>
							<view class="info-bar">
								<view class="price">123</view>
								<text>健康币</text>						
							</view>
							<view class="btn btn-active">立即兑换</view>
							<!-- <view v-else class="btn">立即兑换</view>		 -->			
						</view>
					</view>
					<loading :loadingState="loadingState"></loading>
				</template>
				<empty v-else><view slot="text">暂无可兑换礼品</view></empty>
			</template>
			<template v-else>
				<loading :loadingState="loadingState"></loading>
			</template>			 
		</template>
		
		
	</view> 
	
</view>
</template>

<script> 
 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'

export default{
	name:'invite',
	data(){
		return {
			type:'',
			gold:'',
			token:uni.getStorageSync('token'),
			isLogin:false,
			loginStateUpdate:false,
			loadingState:{
				default:false,
				loading:false,
				completed:false
			},
			static_img:getApp().globalData.static_img
			 
		}
	},
	async onLoad(params) {
		this.type=params.type; 
		
		if(this.type=='balance'){
			uni.setNavigationBarTitle({
				title:'账户余额'
			})
		}else if(this.type=='gold'){
			uni.setNavigationBarTitle({
				title:'健康币'
			})
			this.gold=params.gold;
		}
	},
	async onShow() {
		if(this.loginStateUpdate){
			this.token=uni.getStorageSync('token');			 
			this.loginStateUpdate=false;
		} 
		
		// 退出登录时判断，重新登录
		if(!this.token){
			this.isLogin=await this.$loginState('reset');
			uni.showToast({
				icon:'loading',
				title:'请先登录...',
				mask:true,
				duration:1000
			})
		}else{
			// 其他终端登录时间判断
			this.isLogin=await this.$loginState('reset');
			if(!this.isLogin){
				uni.showToast({
					icon:'loading',
					title:'已登录其他终端',
					mask:true,
					duration:1000
				})
			}
		}
		
	},
	onReachBottom(){
		 
	},
	 
	methods:{ 		 
		 
	},

	components:{  
		loading,
		empty
	}
	
	
}
</script>

<style lang="less">  
.m-header{ 
	position: relative;
	margin:20rpx 2%;
	height:143px;
	background:radial-gradient(circle at left top, #0099ff, #3eaef8, #9dd4f9);
	border-radius:5px;
	overflow: auto;
	.type-name{
		margin:80rpx 0 30rpx 50rpx;
		font-size: 32rpx;
		color:#fff;
	}
	.val-area{
		display: flex;
		margin-left:50rpx;
		.val{
			height:40rpx;
			line-height: 40rpx;
			margin-right: 30rpx;
			font-size: 50rpx;
			font-weight: bold;
			color:#fff;
		}
	}
}
 
.mx-btn{
	position: absolute;
	right:20rpx;
	top:20rpx;
	display: flex;
	align-items: center;
	.icon{
		width:28rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		height:50rpx;
		line-height: 50rpx;
		color:#fff;
	}
	text{
		height:50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		color:#fff;
	}
	
}
 
.info-list-wrap{
	margin:0 2%; 
	border-radius: 15rpx;
	background: #fff;
	.item{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom:2rpx solid #eee;
		font-size: 28rpx;
		&:last-child{
			border-bottom: 0 none;
		}
		.label{ 
			
		}
		.con{
			color:#FFBA40;
		}
	}
}
.cz-btn,.tx-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width:120rpx; 
	height:40rpx;
	line-height: 40rpx;
	margin-right:20rpx;
	border-radius: 38rpx;
	color:#fff;
	.icon{
		display: flex;
		align-items: center;
		width:26rpx;
		margin-right: 8rpx;
		color:#fff;
		image{
			width: 100%;
		}
	}
	text{
		font-size:28rpx;
	}
}
.tx-btn{	
	background: #FFBA40;	
}
.cz-btn{
	background: #f00;
}
 

.caseout-wrap .btn{
	height:80rpx;
	line-height: 80rpx;
	text-align: center;
	margin:40rpx 30rpx;
	background: #3399FF;
	border-radius: 36rpx;
	color: #fff;
	font-size: 30rpx;
}

.tips{
	padding:0 20rpx;
	color:#f00;
	font-size: 24rpx;
}
.hd-title{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:20rpx 0 40rpx;
	image{
		width:20rpx;
	}
	.title{
		margin:0 20rpx;
		font-size: 34rpx;
		font-weight: bold;
	}
}
.gift-list-wrap{
	display: flex;
	flex-wrap: wrap;
	margin:0 1%;
	.item{
		width:44%;
		margin:0 1% 20rpx;
		padding:20rpx 2%;
		background: #fff;
		border-radius: 15rpx;
		overflow: auto;
		.pic{
			margin:30rpx; 
			image{
				width: 100%;
			}
		}
		.title{ 
			margin-bottom: 10rpx;
			font-size: 28rpx; 
			color:#393939;
		}
		.info-bar{
			display: flex; 
			align-items: center;
			height:50rpx;
			position: relative;
			.price{
				display: flex;
				align-items: flex-end;
				font-size: 36rpx;
				font-weight: bold;
			}
			text{
				display: flex;
				align-items: flex-end;
				font-size: 24rpx;
				color:#999
			}
		}
		.btn{
			width:120rpx;
			margin:20rpx auto 0;
			text-align: center;
			height:40rpx;
			line-height: 40rpx; 
			background: #B0B0B0;
			border-radius: 36rpx;
			color:#fff;
			font-size: 22rpx;
		}
		.btn-active{
			background: #FFBA40; 
			
		}
	}
}

.invite-btn{
	display: flex;
	align-items: center;
	padding:10rpx 20rpx;	
	background: linear-gradient(45deg, #f89393,#faadad);
	.left{
		width: 25%;
		flex-shrink: 0;
		image{
			width: 100%;
		}
	}
	.right{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.text{
			border-left:2rpx solid #eee;
			padding:0 20rpx;
			margin-left:20rpx;
			font-size: 24rpx; 
			color:#fff; 
		}
		.btn{			
			flex-shrink: 0;
			padding:5rpx 10rpx;
			background: linear-gradient(10deg,#84caf9,#09f);;
			border-radius: 38rpx;
			color:#fff;
			font-size: 28rpx;
		}
	}
}
 
</style>
